<!-- 字段筛选组件 -->
<template>
    <div class="k-field-filter" style="z-index:99;" v-show="open">
        <div class="field-filter" style="margin-top:5%;width: 850px">
            <header>
                <span class="text">{{ title }}</span>
                <span class="el-icon-close" @click="cancel"></span>
            </header>
            <main class="transfer">
                <el-transfer filterable filter-placeholder="请输入关键词搜索" target-order="unshift" :titles="['选项合集', '已选项合集']"
                    :data="data" v-loading="loading" @right-check-change="choose" @change="change" v-model="value" ref="transferCom">
                    <div slot-scope="{ option }">
                        <div class="default-tranfer-item" @mouseenter="indexKey = option.key" @mouseleave="indexKey = null">

                            <div v-show="value.includes(option.key) && indexKey === option.key" class="button-group">
                              <!--  阻止事件冒泡  -->
                              <!-- 自定义数据项，将上、下、底部、顶部的排序功能放在数据项里面 -->
                              <em class="el-icon-top"
                                  @click.stop.prevent="publicMobileMethod('handleUp', option.key)"></em>
                              <em class="el-icon-sort-up"
                                  @click.stop.prevent="publicMobileMethod('handleTop', option.key)"></em>
                              <em class="el-icon-bottom"
                                  @click.stop.prevent="publicMobileMethod('handleDown', option.key)"></em>
                              <em class="el-icon-sort-down"
                                  @click.stop.prevent="publicMobileMethod('handleBottom', option.key)"></em>
                              <em @click.stop.prevent="publicorder('order', option)" v-if="isShowOrder">{{ option.isOrder == 'asc' || option.isOrder == 'ASC' ? '升序'
                                : '降序' }}</em>
<!--                              :style="option.ascStyle" :style="option.descStyle"-->
                              <em @click.stop.prevent="ascOrder('order', option)" v-if="isHeaderOrder" :class="'asc_'+option.key" :style="option.ascStyle">升序</em>
                              <em @click.stop.prevent="descOrder('order', option)" v-if="isHeaderOrder" :class="'desc_'+option.key" :style="option.descStyle">降序</em>
                            </div>
                            <span>{{ option.label }}</span>
                        </div>
                    </div>
                </el-transfer>
            </main>

            <footer class="footer">
                <div></div>
                <div>
                    <!-- 档号定义 -->
                    <el-button class="determine" @click="sortRestore"  v-show="roleDetail">恢复默认值</el-button>
                    <el-button class="determine" @click="detail"  v-show="roleDetail">定义</el-button>
                    <!-- 应用定义 -->
                    <el-button class="determine"  v-show="IsXmDetail" @click="XmDetail">项目明细</el-button>
                    <el-button class="determine"  v-show="IsJuanDetail" @click="JuanDetail">卷明细</el-button>
                    <el-button class="determine"  v-show="IsJianDetail" @click="JianDetail">件明细</el-button>
                    <el-button class="determine"  v-show="IsDzwjDetail" @click="DzwjDetail">电子文件明细</el-button>
                    <!-- 首页配置 -->
                    <el-button class="determine"  v-show="IsGrset" @click="IsGrsetTap">个人设置</el-button>
                    <el-button class="determine"  v-show="IsQuickEntry" @click="QuickEntry">快捷入口</el-button>
                    <el-button class="determine"  v-show="IsHomepage" @click="HomePage">模块设置</el-button>
                    <el-button class="determine"  v-show="IsDaiBan" @click="Daiban">待办内容</el-button>
                    <el-button class="determine"  @click="determine">确定</el-button>
                    <el-button class="cancel"  @click="cancel">取消</el-button>

                </div>
            </footer>

        </div>
    </div>
</template>

<script>


export default {
    name: 'KFieldFilter',
    watch: {
        cities: {
            immediate: true,
            handler() {
               this.generateData()
            },
        },

        dataChecked: {
            handler(newVal) {
                 this.dataChecked = newVal;

            }
        },

    },
    props: {
        dataChecked: {
            type: Array,
            /**
          * 右侧数据
          * @returns {*[]}
          */
            default: () => [],
        },
        roleDetail: {
            type: Boolean,
            default: false
        },
        IsXmDetail: {
            type: Boolean,
            default: false
        },
        IsJuanDetail: {
            type: Boolean,
            default: false
        },
        IsJianDetail: {
            type: Boolean,
            default: false
        },
        IsDzwjDetail: {
            type: Boolean,
            default: false
        },
        IsQuickEntry: {
          type: Boolean,
          default: false
        },
        IsHomepage: {
          type: Boolean,
          default: false
        },
        IsDaiBan: {
          type: Boolean,
          default: false
        },
        IsGrset: {
          type: Boolean,
          default: false
        },
        title: {
            type: String,
            default: ""
        },
        cities: {
            type: Array,
            /**
             * 全部数据
             * @returns {*[]}
             */
            default: () => [],
        },

        open: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        // 是否展示升降序
        isShowOrder: {
          type: Boolean,
          default: false
        },
        // 表头设置的升降序
        isHeaderOrder: {
          type: Boolean,
          default: false
        },
    },
    /**
     * 初始化数据
     * @returns {{item: *[], data: *[], indexKey: null, value: *[]}}
     */
    data() {
        return {
            // dataChecked:"",
            data: [], // 全部数据
            value: "", // 选中数据
            item: [], // 右侧勾选数据
            indexKey: null, // 高亮显示
            valueKey:[],
        }
    },
    methods: {
        /**
         * 初始数据集
         * @returns {*[]}
         */
        async generateData() {

            const data = []
            console.log(this.cities,"kdfjlk")
            this.cities.forEach((city, index) => {
              if (this.isHeaderOrder) {
                data.push({
                  label: city.fieldCaption,
                  key: index,
                  code: city.fieldName,
                  isOrder: city.isOrder,
                  ascStyle: city.isOrder=='ASC'||city.isOrder=='asc'?'color: red' : '',
                  descStyle: city.isOrder=='DESC'||city.isOrder=='desc'?'color: red' : '',
                });
              } else {
                data.push({
                    label: city.fieldCaption,
                    key: index,
                    code: city.fieldName,
                    isOrder: city.isOrder
                });
              }
            });
            this.data = data  //渲染左侧数据


            //处理左侧数据
            var valueKey = [];
            if (this.dataChecked.length > 0) {
              for (var i in this.dataChecked) {
                for (var k in data) {
                        if (this.dataChecked[i].fieldName == data[k].code) {
                            valueKey.push(this.dataChecked[i].key)
                        }
                    }

                }

            }
            this.valueKey=valueKey;
            this.value = JSON.parse(JSON.stringify(valueKey)) //渲染右侧数据
        },
        /**
         * 关闭弹窗
         */
        closeFilter() {
            this.$emit('closeFilter', false)
        },
        /**
         * 确定选择
         */
        determine() {
          if (this.IsQuickEntry == true && this.IsHomepage == true && this.IsDaiBan == false) {
            if (this.value.length > 4) {
              this.$modal.msgWarning('待办内容最多选择四个')
            } else {
              this.$emit('determine', this.value, this.data)
            }
          } else {
            this.$emit('determine', this.value, this.data)
          }
        },
        /**
         * 取消选择
         */
        cancel() {
            if (this.$refs.transferCom) {
  this.$refs.transferCom.$children['0']._data.query = '';
  // 清空右边搜索
  this.$refs.transferCom.$children['3']._data.query = '';
}
            this.closeFilter()
            this.generateData()
        },
        /**
         * 恢复默认值
         */
        sortRestore() {
           this.value=this.valueKey;
        },
        /**
         * 项目明细
         */
        XmDetail() {
            this.$confirm('当前页面如做修改，将直接保存?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('determine', this.value, this.data, false)
                this.$emit('XmDetail', this.value, this.data)
            }).catch(() => { });
            // this.closeFilter()
        },
        /**
         * 卷明细
         */
        JuanDetail() {
            this.$confirm('当前页面如做修改，将直接保存?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('determine', this.value, this.data, false)
                this.$emit('JuanDetail', this.value, this.data)
            }).catch(() => { });
        },
        /**
         * 件明细
         */
        JianDetail() {
            this.$confirm('当前页面如做修改，将直接保存?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('determine', this.value, this.data, false)
                this.$emit('JianDetail', this.value, this.data)
            }).catch(() => { });
        },
        /**
         * 电子文件明细
         */
        DzwjDetail() {
            this.$confirm('当前页面如做修改，将直接保存?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('determine', this.value, this.data, false)
                this.$emit('DzwjDetail', this.value, this.data)
            }).catch(() => { });
        },
        /**
         * 快捷入口
         */
        QuickEntry() {
          this.$confirm('当前页面如做修改，将直接保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.IsDaiBan == false) {
              if (this.value.length > 4) {
                this.$modal.msgWarning('待办内容最多选择四个')
              } else {
                this.$emit('determine', this.value, false)
                this.$emit('QuickEntry', this.value, this.data)
              }
            } else {
              this.$emit('determine', this.value, false)
              this.$emit('QuickEntry', this.value, this.data)
            }
          }).catch(() => { });
        },
        /*个人设置*/
        IsGrsetTap() {
          this.$confirm('当前页面如做修改，将直接保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
       
              this.$emit('determine', this.value, false)
              this.$emit('isGrsetTap', this.value, this.data)
            
          }).catch(() => { });
        },
        /**
         * 首页模块设置
         */
        HomePage() {
          this.$confirm('当前页面如做修改，将直接保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.IsDaiBan == false) {
              if (this.value.length > 4) {
                this.$modal.msgWarning('待办内容最多选择四个')
              } else {
                this.$emit('determine', this.value, false)
                this.$emit('HomePage', this.value, this.data)
              }
            } else {
              this.$emit('determine', this.value, false)
              this.$emit('HomePage', this.value, this.data)
            }
          }).catch(() => { });
        },
        /**
         * 待办内容设置
         */
        Daiban() {
          this.$confirm('当前页面如做修改，将直接保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$emit('determine', this.value, false)
            this.$emit('Daiban', this.value, this.data)
          }).catch(() => { });
        },
        /**
         * 定义
         */
        detail() {
            this.$emit('detail', this.value, this.data)
            // this.closeFilter()
        },
        /**
           * 监听右侧选中
           */
        choose(value) {
            this.item = value
            console.log("this.item", this.item)
        },
        /**
         * 查看右侧数据
         */
        change(value) {
          console.log(value, this.item)
          // 如果右侧数据中不存在右侧勾选数据,就将右侧勾选数据清空
          if(this.item.some(item => value.includes(item)) == false) {
            this.item = []
          }
        },
        /**
         * 右侧数据点击排序
         */
        publicMobileMethod(direction, key) {
            const self = this
            let index
            // 判断是否超出一条
            const item = self.item
            if (item.length === 1 || item.length === 0) {
                self.value.forEach((val, indexs) => {
                    // 获取需移动数据的下标
                    if (val === key) {
                        index = indexs
                    }
                })
                if (index === 0 && direction !== 'handleBottom' && direction !== 'handleDown') {
                    return self.$message('没有上移的空间了')
                }
                if (index === self.value.length - 1 && direction !== 'handleUp' && direction !== 'handleTop') {
                    return self.$message('没有下移的空间了')
                }
                // 改变的数组
                const changeItem = self.value[index]
                // 根据下标在数组中删除该数据
                self.value.splice(index, 1)
                // 判断加入数组位置
                if (direction) {
                    // 置顶
                    direction === 'handleTop' && self.value.unshift(changeItem)
                    // 置底
                    direction === 'handleBottom' && self.value.push(changeItem)
                    // 上移
                    direction === 'handleUp' && self.value.splice(index - 1, 0, changeItem)
                    // 下移
                    direction === 'handleDown' && self.value.splice(index + 1, 0, changeItem)
                }
            } else {
                self.$message.error('只能选择一条数据进行上下移动')
            }
        },


        //升序降序  升序asc     降序desc
        publicorder(direction, data) {
            var that = this;
            if (data.isOrder == "asc" || data.isOrder == "ASC") {
                data.isOrder = "desc"
            } else if (data.isOrder == "desc" || data.isOrder == "DESC") {
                data.isOrder = "asc"
            }
            that.data.filter((item) => {
                if (item.key ==data.key) {
                    that.data[data.key].isOrder = data.isOrder
                }
            })
        },


        // 表头升序
        ascOrder(direction, data) {
          var that = this;
          console.log(data)
          if (data.isOrder == 'none' || data.isOrder == '' || data.isOrder == 'NONE' || data.isOrder == undefined) {
            $(".asc_"+data.key).css("color","red")
            data.ascStyle = 'color: red'
            data.isOrder = "ASC"
          } else if (data.isOrder == 'ASC' || data.isOrder == 'asc') {
            $(".asc_"+data.key).css("color","")
            data.ascStyle = ''
            data.isOrder = 'none'
          } else if (data.isOrder == "DESC" || data.isOrder == "desc") {
            $(".asc_"+data.key).css("color","red")
            data.ascStyle = 'color: red'
            data.isOrder = 'ASC'
          }
          $(".desc_"+data.key).css("color","")
          data.descStyle = ''
          that.data.filter((item) => {
            if (item.key ==data.key) {
              that.data[data.key].isOrder = data.isOrder
            }
          })
        },
        // 表头降序
        descOrder(direction, data) {
          var that = this;
          if (data.isOrder == '' || data.isOrder == 'none' || data.isOrder == 'NONE' || data.isOrder == undefined) {
            data.isOrder = "DESC"
            $(".desc_"+data.key).css("color","red")
          } else if (data.isOrder == 'ASC' || data.isOrder == 'asc') {
            data.isOrder = 'DESC'
            $(".desc_"+data.key).css("color","red")
          } else if (data.isOrder == "DESC" || data.isOrder == "desc") {
            data.isOrder = 'none'
            $(".desc_"+data.key).css("color","")
          }
          $(".asc_"+data.key).css("color","")
          data.ascStyle = ''
          that.data.filter((item) => {
            if (item.key ==data.key) {
              that.data[data.key].isOrder = data.isOrder
            }
          })
        }
    },

    mounted() {
        // this.generateData()
    },
}
</script>

<style lang='scss' scoped>
// ::v-deep .el-dialog {
//     // padding: 0px 30px 20px 0px !important;
//     display: flex;
//     flex-direction: column;
//     margin: 0 !important;
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     max-height: calc(100% - 30px);
//     max-width: calc(100% - 30px);
// }

// ::v-deep .el-dialog .el-dialog__body {
//     flex: 1;
//     overflow: auto;
// }

// ::v-deep .el-form-item__content {
//     line-height: 26px;
// }
.k-field-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);

    .field-filter {
        position: absolute;
        top: 40%;
        left: 50%;
        width: 600px;
        height: 620px;
        overflow-x: auto;
        transform: translate(-50%, -50%);
        background-color: #FFFFFF;
        border: 1px solid rgba(219, 220, 220, 1);
        border-radius: 4px;

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 45px;
            padding: 0 13px;
            border-bottom: 1px solid #DBDCDC;
        }

        .text {
            font-family: "Microsoft YaHei", sans-serif;
            font-size: 14px;
            color: #3C4455;
            line-height: 22px;
            font-weight: 700;
        }

        .el-icon-close {
            cursor: pointer;
            color: #B5B5B5;
        }

        .transfer {
            padding: 13px 13px;
            border-bottom: 1px solid #DBDCDC;
        }

        .footer {
            margin: 8px 8px 0 0;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
<style lang="scss">
.field-filter {

    .determine.el-button--mini {
        background-color: #2A76CD;
        color: #FFFFFF;
    }

    .el-transfer__button.cancel,
    .el-button--mini.cancel {

        &:focus,
        &:hover {
            background: #FFFFFF;
            border-color: #2A76CD;
            color: #2A76CD;
        }
    }

    .el-transfer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-transfer-panel__item {
            margin-right: 0;
        }

        .default-tranfer-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .button-group {
                em {
                    margin-right: 8px;
                }
            }
        }

        .el-input.el-input--small {
            .el-input__inner {
                border-radius: 4px;
            }
        }

        .el-transfer__buttons {
            padding: 0;
            margin: 0 17px;

            .el-transfer__button {
                display: block;
                margin: 0 0 5px 0;
                padding: 4px 8px;
            }

            .el-button--primary.el-transfer__button {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #2A76CD;
                border-color: #2A76CD;
            }

            .el-button--primary.is-disabled {
                background-color: #a0cfff;
                border-color: #a0cfff;
            }
        }

        .el-checkbox__input.is-indeterminate {
            .el-checkbox__inner {
                background: #2A76CD;
                border-color: #2A76CD;
            }
        }

        .el-transfer-panel {
            width: 49%;
            border-radius: 0;
        }
        .el-transfer-panel__list.is-filterable{
            height: 390px;
        }
        .el-transfer-panel__body {
            .el-checkbox__label {
                &:hover {
                    color: #2A76CD;
                }
            }
             height: 437px;
        }

        .el-transfer-panel__header {
            .el-checkbox {
                .el-checkbox__label {
                    font-size: 14px;

                    span {
                        left: 100px
                    }
                }
            }
        }

        .el-transfer-panel__footer {
            top: 0;
            left: 61%;
            background-color: transparent;
            display: flex;
            width: 30%;
            justify-content: right;
            border-color: transparent;

            .el-button--text {
                color: #B5B5B5;
                margin-left: 5px;

                .icon-huidaodingbu {
                    font-size: 16px;
                }

                em {
                    font-size: 14px;
                    font-weight: 600;
                }
            }
        }

        .el-transfer-panel:first-child {
            .el-transfer-panel__header {
                .el-checkbox {
                    .el-checkbox__label {
                        span {
                            left: 84px;
                        }
                    }
                }
            }
        }
    }
}
</style>

